<template>
  <el-dialog :visible.sync="dialogVisible" width="600px">
    <div class="content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="60px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="赛事" prop="event_id">
          <el-select v-model="ruleForm.event_id" placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.title_cn"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image_url">
          <el-upload
            :action="action"
            list-type="picture-card"
            :on-preview="handlePreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            accept="image/*"
            :limit="1"
            :headers="{
              token: token,
            }"
            multiple
            :file-list="ruleForm.image_url"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :visible.sync="previewVisible">
      <img v-if="dialogImageUrl" width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {
  name: "upLoadWork",
  data() {
    return {
      action: "",
      dialogVisible: false,
      ruleForm: {
        title: "",
        price: "",
        image_url: [],
        event_id: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        event_id: [
          { required: true, message: "请选择赛事", trigger: "change" },
        ],
        image_url: [
          { required: true, message: "请上传图片", trigger: "change" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
      },
      dialogImageUrl: "",
      previewVisible: false,
      token: localStorage.getItem("token"),
      list: [],
    };
  },
  mounted() {
    this.action = this.BASE_URL + "/common/upload";
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.getList();
    },
    getList() {
      this.$post("/index/events_list", {
        page: 1,
        rows: 999,
      }).then((res) => {
        this.list = res.data.data;
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let arr = [];
          this.ruleForm.image_url.forEach((item) => {
            arr.push(item.url);
          });
          this.$post("/user/images_publish", {
            ...this.ruleForm,
            image_url: arr.join(","),
          }).then((res) => {
            // console.log(res);
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.$emit("list-refresh");
              this.dialogVisible = false;
              this.resetForm();
            }
          });
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.ruleForm.image_url = [];
    },
    handleSuccess(res) {
      this.ruleForm.image_url = [];
      this.ruleForm.image_url.push({
        url: res.data.fullurl,
      });
    },
    handlePreview(file) {
      this.dialogVideoUrl = null;
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file) {
      this.ruleForm.image_url.forEach((item, index) => {
        if (item.url === file) {
          this.ruleForm.image_url.splice(index, 1);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 768px) {
}
</style>
